<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          plain
      
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <right-toolbar @queryTable="getList"></right-toolbar>
    </el-row>

    <vxe-table
      ref="table"
      :data="tableData.list"
      :loading="tableData.loading"
      border
    >
      <vxe-column field="warehouseNo" title="编码" width="150" align="center"/>
      <vxe-column field="warehouseName" title="名称" width="260" align="center"/>
      <vxe-column field="address" title="地址" align="center"/>
      <vxe-column title="操作" width="150">
        <template #default="{ row }">
          <el-button
            size="small"
            type="primary"
            link
            @click="handleUpdate(row)"
          >修改</el-button>
          <el-button
            size="small"
            type="primary"
            link
            @click="handleDelete(row)"
          >删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>

    <div class="pagination-container">
      <pagination
        v-show="tableData.paging.total > 0"
        :total="tableData.paging.total"
        v-model:page="tableData.paging.pageNum"
        v-model:limit="tableData.paging.pageSize"
        @pagination="getList"
        class="is-background" 
      />
    </div>

    <edit ref="editDialog" @sub="onEditSub"></edit>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from "vue";
import api from "./api.js";
import Edit from './edit.vue';

const { proxy } = getCurrentInstance();

const editDialog = ref();
const loading = ref(false);
const table = ref();
const tableData = reactive({
  loading: false,
  list: [],
  paging: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
  },
});

const initQueryParams = {
  pageNum: 1,
  pageSize: 10,
};

const queryParams = reactive({...initQueryParams});

/** Queries the asset list */
async function getList() {
  loading.value = true;
  const {pageNum, pageSize} = tableData.paging;
  const query = {...queryParams};
  const pageReq = {page: pageNum - 1, size: pageSize};

  try {
    const response = await api.list(query, pageReq);
    const { content, totalElements } = response;
    tableData.list = content;
    tableData.paging.total = totalElements;
  } catch (error) {
    console.error(error);
  } finally {
    tableData.loading = false;
    proxy.$message.success("刷新成功");
  }
}

/** Adds new item */
function handleAdd() {
  editDialog.value.open();
}

/** Updates existing item */
function handleUpdate(row) {
  editDialog.value.open(row);
}

/** Actions after edit submission */
function onEditSub() {
  getList();
}

/** Deletes item */
function handleDelete(row) {
  const ids = row.id || this.ids;
  proxy.$modal.confirm('是否确认删除资产清单表编号为"' + ids + '"的数据项？').then(() => {
    return api.del(ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}


onMounted(async () => {
  await getList();
});
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;

}
.vxe-table {
  flex: 1; 
  overflow: auto;
}

.pagination-container {
  display: flex;
  justify-content:right; 
 
}
</style>